<template>
     <el-form-item>
      <el-input v-model="Page.UsreName" style="width: 100px;" />
      <el-button @click="Getdate()" type="warning">查询</el-button>
      <el-button @click="Chon()" type="danger">重置</el-button>
    </el-form-item>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column fixed prop="roleId" label="角色编号" width="150" />
    <el-table-column prop="userName" label="用户名" width="120" />
    <el-table-column prop="password" label="密码" width="120">
      <template #default="scope">
        {{ scope.row.password="******" }}
      </template>
    </el-table-column>        
    <el-table-column prop="roleName" label="角色" width="120" />
    <el-table-column prop="state" label="是否启用" width="120" >
                  <template #default="scope">

    <el-tag type="success" v-if="scope.row.state==1">启用</el-tag>

    <el-tag type="warning" v-if="scope.row.state==0">未启用</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="number" label="序号" width="120" />
    <el-table-column prop="createtime" label="创建时间" width="180">
        <template #default="scope">
            {{ scope.row.createtime.substring(0,19).replace("T"," ")}}
      </template>
    </el-table-column>      
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default="scope">

        <el-button link type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

<el-pagination
      
      v-model:current-page="Page.Pageindex"
      v-model:page-size="Page.Pagesize"
      :page-sizes="[2, 3, 4, 5]"
       
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Page.totoCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    />


</template>

<script lang="ts" setup>
import { ref ,reactive,onMounted} from 'vue';
import{read} from '../Until/axiosHelp'


const tableData =ref([])

let Page=ref({
    Pageindex:1,
    Pagesize:3,
    totoCount:0,
    totoPage:0,
    UsreName:""
})

const Chon=()=>{
  Page.value.UsreName=""
}

onMounted(()=>{
    Getdate();
})

const Getdate=()=>{
   read.get("api/Query/UserShow",{params:Page.value}).then(res=>{
     tableData.value=res.data.data.data
     Page.value.totoCount=res.data.data.totoCount
     Page.value.totoPage=res.data.data.totoPage
   })
}



const handleSizeChange = (val: number) => {
  Page.value.Pagesize=val;
  Getdate();
}
const handleCurrentChange = (val: number) => {
    Page.value.Pageindex=val;
  Getdate();
}

</script>
